<script setup>
import {ref, defineProps, defineEmits, watch} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";

const emit = defineEmits()
const props = defineProps({
  cancelEventVisiable: Boolean,
  currentEventDetail: Object,
  cancelEventIds: Array
})

const request=ref({
  eventId:null,
  returnCause:''
})
const Visiable = ref(false)
watch(() => props.cancelEventVisiable, newVal => {
  Visiable.value = newVal;
  if (newVal) {
    if (props.currentEventDetail != null) {
      request.value.eventId = props.currentEventDetail.event.id
    } else {
      request.value.eventId = props.cancelEventIds
    }
  }
})

const formLabelWidth = '140px'
const handleClose = () => {
  formRef.value.resetFields()
  emit('close', false);
}

const cancelEvent = () => {
  formRef.value.validate(valid=>{
    if(valid){
      //ElMessage.success("表单验证通过，valid的值为"+valid)

      axios.get(`/event/retracteEvent/${request.value.eventId}?returnCause=${request.value.returnCause}`).then(resp => {
        ElMessage.success(resp.data)
        handleClose()
      }).catch(err => {
        ElMessage.error(err.response.data)
      })
    }else {
      //ElMessage.warning("表单验证失败")
    }
  })
}

const formRef=ref();
const rules=ref({
  returnCause: [
    { required: true, message: '撤回理由不能为空', trigger: 'blur' },
    { min: 5, message: '撤回理由不能少于5个字', trigger: 'blur' }
  ]
})
</script>

<template>
  <el-dialog v-model="Visiable" title="撤回隐患" width="500" @close="handleClose">
    <el-form
        :model="request"
        :rules="rules"
        ref="formRef"
    >
      <el-form-item label="撤回理由" :label-width="formLabelWidth" prop="returnCause">
        <el-input
            v-model="request.returnCause"
            style="width: 240px"
            :rows="2"
            type="textarea"
            placeholder="撤回理由"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="cancelEvent">
          提交
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped>
/* 对话框标题样式 */
.el-dialog__header {
  background-color: #f5f7fa;
  padding: 20px;
  font-size: 18px;
  font-weight: bold;
  border-bottom: 1px solid #ebeef5;
}

/* 表单项样式 */
.el-form-item {
  margin-bottom: 20px;
}

.el-form-item__label {
  font-weight: bold;
  color: #333;
}

/* 输入框样式 */
.el-input,
.el-textarea {
  width: 100%; /* 使用 100% 宽度以适应不同的屏幕 */
  box-sizing: border-box;
  border-radius: 4px;
  padding: 10px;
  font-size: 14px;
}

.el-input::placeholder,
.el-textarea__inner::placeholder {
  color: #c0c4cc;
}

/* 对话框底部按钮样式 */
.dialog-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background-color: #fff;
  border-top: 1px solid #ebeef5;
}

.dialog-footer .el-button {
  padding: 10px 20px;
  font-size: 14px;
}

.dialog-footer .el-button--primary {
  background-color: #409eff;
  border-color: #409eff;
  color: #fff;
}

.dialog-footer .el-button--primary:hover {
  background-color: #66b1ff;
  border-color: #66b1ff;
}

.dialog-footer .el-button {
  background-color: #fff;
  border-color: #dcdfe6;
  color: #606266;
}

.dialog-footer .el-button:hover {
  background-color: #f5f7fa;
  border-color: #c0c4cc;
}
</style>